<template>
    <div class="header" :style="setBGC? {backgroundColor: content}: ''">
        <div class="left-view" @click="$emit('onclick', 'left')">
            <img v-if="left=='back'" class="icon" src="../../assets/previous.png" @click="$router.back()">
            <img v-else-if="left=='add'" class="icon" src="../../assets/top-add.svg">
            <span v-else-if="left=='home'" class="text-icon">
                <div class="back-icon"/>
                <span>首页</span>
            </span>
        </div>
        <div class="title-view" @click="$emit('onclick', 'content')">
            <div v-if="content=='information-nav'" class="header-nav">
                <router-link to="/study" replace class="nav-item" :class="{'active': !nav}">精品资讯</router-link>
                <router-link to="/study/valuation" replace class="nav-item":class="{'active': nav == 1}">金融数据</router-link>
                <router-link to="/study/gossip" replace class="nav-item":class="{'active': nav == 2}">金融八卦</router-link>
            </div>
            <div v-else-if="content=='same-nav'" class="header-nav">
                <router-link to="/same" replace class="nav-item" :class="{'active': !nav}">报价平台</router-link>
                <router-link to="/same/assets" replace class="nav-item":class="{'active': nav == 1}">资产平台</router-link>
                <router-link to="/same/finance" replace class="nav-item":class="{'active': nav == 2}">大金融圈</router-link>
            </div>
            <img v-else-if="content=='default-logo'" class="logo-img" src="../../assets/djs-logow.svg">
            <img v-else-if="content=='think-logo'" class="logo-img" src="../../assets/think-logo.svg">
            <div v-else-if="content && !setBGC">
                {{content}}
            </div>
        </div>
        <div class="right-view" @click="$emit('onclick', 'right')">
            <img v-if="right=='share'" class="icon" src="../../assets/share.svg" @click.stop="$emit('onclick', 'share')">
            <div v-else-if="right=='register'" class="text-btn">注册</div>
            <div v-else-if="right=='login'" class="text-btn">登录</div>
            <img v-else-if="right=='setting'" class="icon" src="../../assets/setting-icon.png">
            <div v-else-if="right=='add-btn'" class="btn-icon">添加</div>
            <div v-else-if="right=='send-btn'" class="btn-icon">发送</div>
            <div v-else-if="right=='user'" class="user-info" @click="$router.push('/user')">
               <!--  <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1958966202,1289193182&fm=27&gp=0.jpg">
                <div class="msg">3</div> -->
            </div>
            <div v-else-if="right=='admin'" class="user-info" @click="$router.push('/user')">
                <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1958966202,1289193182&fm=27&gp=0.jpg">
                <span>管理员</span>
                <div class="msg">3</div>
            </div>
            <div v-else="" class="default-text">{{right}}</div>
        </div>
    </div>
</template>

<style lang="less" scoped>

    @import '../../style/variable';

    .header{
        text-align: center;
        height: 100%;
        background-color: @app-color;
        color: @color-white;
        position: relative;

        .left-view, .title-view, .right-view{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            .icon{
                display: block;
                margin: 1.5rem;
                height: 1.5rem;
            }
            .text-icon{
                padding-left: 1.5rem;
                color: @color-text-black;;
                span{
                    line-height: 3rem;
                    margin: .7rem 0;
                    display: inline-block;
                    vertical-align: middle;
                }
                .back-icon{
                    display: inline-block;
                    vertical-align: middle;
                    width: 1rem;
                    height: 1rem;
                    border: .1rem solid @color-text-black;
                    border-top: 0;
                    border-right: 0;
                    transform-origin: 50% 50%;
                    transform: rotate(45deg);
                }
            }
        }

        .left-view{
            left: 0;
            z-index: 10;
        }
        .right-view {
            right: 0;
            z-index: 10;

            .icon{
                height: 1.8rem;
            }

            .btn-icon{
                width: 5.6rem;
                height: 3rem;
                line-height: 3rem;
                margin: .7rem 1.5rem;
                background-color: @color-white;
                color: @app-color;
                border-radius: .3rem;
                text-align: center;
            }
            .default-text{
                color: @color-text-yellow;
                font-size: 1.6rem;
                margin: 1.4rem 1.5rem;
            }
            .text-btn{
                color: @color-text-black;
                font-size: 1.5rem;
                margin: .7rem 1.5rem;
                line-height: 3rem;
            }
        }
        .title-view{
            width: 100%;
            .logo-img{
                height: 2.4rem;
                margin: 1rem auto;
                display: block;
            }
            .header-nav{
                width: 22.5rem;
                margin: auto;
                border: 1px solid @color-white;
                border-radius: .3rem;
                font-size: 0;
                .nav-item{
                    width: 7.5rem;
                    font-size: 1.4rem;
                    line-height: 2.7rem;
                    box-sizing: border-box;
                    display: inline-block;
                    color: @color-white;
                    &:not(:last-child){
                        border-right: 1px solid @color-white;
                    }
                    &.active{
                        background-color: @color-white;
                        color: @app-color;
                    }
                }
            }
        }


        .user-info{
            position: relative;
            padding-right: 1.5rem;
            img{
                width: 2.5rem;
                height: 2.5rem;
                border-radius: 1.25rem;
                vertical-align: middle;
            }
            span{
                vertical-align: middle;
                margin-left: .4rem;
                font-size: 1.3rem;
            }
            .msg{
                position: absolute;
                background-color: @color-red;
                color: @color-white;
                width: 1.6rem;
                height: 1.6rem;
                font-size: .9rem;
                border-radius: .8rem;
                line-height: 1.6rem;
                top: 0;
                right: .7rem;
                text-align: center;
            }
        }
    }

</style>

<script>
    export default {
        props: ['left', 'content', 'right', 'nav'],
        computed: {
            setBGC(){
                return !!(this.content && this.content.match(/\#\S{3}(\S{3})?$/));
            }
        }
    }
</script>